<template>
  <view class="info_list">
    <view class="info_item">
      <view class="left" :class="{small:small,}">
        {{title}}
      </view>
      <view class="right" :class="{small:small,}">
        <slot name="default" />
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "y-list-item",
  props:{
    title: {
      type: String,
      default: null,
      required: false
    },
    small: {
      type: Boolean,
      default: false,
      required: false
    }
  }
}
</script>

<style scoped lang="scss">
.info_list {

  .info_item {
    margin-top: 20rpx;
    display: flex;
    align-items: baseline;

    .left {
      color: #000000;
      min-width: 120rpx;
      text-align-last: justify;
      font-size: 28rpx;
      //letter-spacing: 2rpx;
    }

    .small {
      font-size: 26rpx !important;
    }

    .right {
      padding-left: 30rpx;
      flex: 1;
      color: #7F8E99;
      font-size: 28rpx;
      //margin-top: 4rpx;
      //display: flex;
    }
  }
}
</style>
